百度地图获取规划路径信息

本文意在解决通过制定两点坐标获取百度搜索的路径结果信息，用途是重现路径（比如在mapv上绘制轨迹显示效果图等）。
实现思路：

加载百度地图所需的js引用；
html布局用于显示结果；
初始化百度地图并加载到页面上，给地图对象添加点击事件的监听；
实现地图的点击监听方法，主要是获取到点击地图的坐标，并确定是起点和终点；
实现pointPathSearch()方法，创建百度地图驾车路径检索的实例从而实现输入起点终点进行路径规划搜索并设置检索完成的事件监听（主要是实现路径返回的数据的封装），实现搜索方法，主要是处理点击获取的坐标，并调用之前pointPathSearch()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取百度地图点击两点的路线规划信息</title>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=CmVUh1GnOGsl7YcRNDSBb3AEzrEE0RXr"></script>
    <style>
        html,body{width:100%;height: 100%;padding: 0;margin: 0}
        .map{width:100%;height:100%;padding:0;margin:0}
    </style>
</head>
<body>
<div id="map" class="map"></div>
<div style="position:absolute;top:10px;left: 10px;">
    <table>
        <tr>
            <td><span>起点</span></td>
            <td><input type="text" id="sPoint"></td>
        </tr>
        <tr>
            <td><span>终点</span></td>
            <td><input type="text" id="ePoint"></td>
        </tr>
        <tr>
            <td ><input type="button" value="查询" id="btnSearch"> </td>
            <td ><input type="button" value="重置" id="btnReset"> </td>
        </tr>
        <tr>
            <td><span>时间</span></td>
            <td><input type="text" id="time" readonly style="width:50px"> | <input type="text" id="timeformate" readonly  style="width:50px"></td>
        </tr>
        <tr>
            <td><span>距离</span></td>
            <td><input type="text" id="distance" readonly  style="width:50px"> | <input type="text" id="distanceformate" readonly  style="width:50px"></td>
        </tr>
    </table>
    <hr/>
    <br/>
    <textarea id="result" rows="6" cols="4"></textarea>
</div>
</body>
</html>
<script>

    function creat(){
        // 创建Map实例
        map = new BMap.Map("map", { enableMapClick: false });
        var point = new BMap.Point(112.571757,37.798085);
        map.centerAndZoom(point, 9);
        map.enableScrollWheelZoom();
        if(typeof(mapClickHandler) === "function")
        {
            map.addEventListener("click", mapClickHandler);
        }
    }
    creat();
    var flag = true;
    function mapClickHandler(e){
        // 从经纬度得到地址
        var curPos = e.point.lng + "," + e.point.lat;
        if(flag){
            $("#sPoint").val(curPos);
            flag = false;
        }else{
            $("#ePoint").val(curPos);
            flag = true;
        }
    }

    $("#btnSearch").click(function(){
        var sp = $("#sPoint").val();
        var ep = $("#ePoint").val();
        if(sp && ep){
            /*/!*var sPoint = new BMap.Point(sp.split(",")[0],sp.split(",")[1]);
             var ePoint = new BMap.Point(ep.split(",")[0],ep.split(",")[1]);*!/*/
            pointPathSearch(sp.split(",")[0],sp.split(",")[1],
                    ep.split(",")[0],ep.split(",")[1]);
        }
        //namePathSearch("天津","太原",1,array);
    });

    $("#btnReset").click(function(){
        var sp = $("#sPoint").val("");
        var ep = $("#ePoint").val("");
        flag = true;
        map.clearOverlays();
    });

    function onSearchCompleteYeWHandler(data){
        //data中包含搜索返回的一些数据
        if(data){
            $("#result").text(data.coors);
            $("#time").val(data.time);
            $("#timeformate").val(data.formattime);
            $("#distance").val(data.distance);
            $("#distanceformate").val(data.formatdistance);
        }
    }

    function pointPathSearch(slng,slat,elng,elat,policy,tujd){
        //确定查询的策略，百度现在只支持最短时间，最短路程，不走高速三种策略
        if(policy){
            if(policy === 1){
                policy = BMAP_DRIVING_POLICY_LEAST_TIME;
            }else if(polycy === 2){
                policy = BMAP_DRIVING_POLICY_LEAST_DISTANCE;
            }else if(polycy === 3){
                policy = BMAP_DRIVING_POLICY_AVOID_HIGHWAYS;
            }
        }else{
            policy = BMAP_DRIVING_POLICY_LEAST_TIME;
        }
        if(slng && slat && elng && elat){
            var pA = new BMap.Point(slng,slat);
            var pB = new BMap.Point(elng,elat);
            driving = new BMap.DrivingRoute(
                    map,
                    {renderOptions:{map: map, autoViewport: true},
                        onSearchComplete:onSearchCompleteHandler,
                        policy:policy
                    });
            if(tujd && tujd.length>0){
                driving.search(pA, pB,{waypoints:tujd});
            }else{
                driving.search(pA, pB);
            }

        }
    }

    function onSearchCompleteHandler(result){
        //DrivingRouteResult
        //console.log(result.policy.length);
        var t = result.getPlan(0);
        var tt = t.getRoute(0).getPath();
        var result = "";
        $.each(tt,function(index,item){
            if(item){
                if(result === ""){
                    result += item.lng + "," + item.lat;
                }else{
                    result += ";" + item.lng + "," + item.lat;
                }
            }
        });
        var ob = new Object();
        ob.coors = result;
        ob.time = t.getDuration(false);
        ob.formattime = t.getDuration(true);
        ob.distance = t.getDistance(false);
        ob.formatdistance = t.getDistance(true);
        if(typeof onSearchCompleteYeWHandler === "function"){
            onSearchCompleteYeWHandler(ob);
        }
    }
</script>

demo只是显示了一个起点终点路径规划，这个方法可以实现批量获取起点和终点的路径规划，主要可以获取到规划的路径的途经点数据，此demo可以扩展到其它支持路径规划功能地图平台上。

百度地图获取规划路径信息

new2old

引用和评论

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具